<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>銘聯洗車</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,
    minimum-scale=1,maximum-scale=1,user-scalable=no">
    <style>
		body{margin:0;padding:0;}
a:link,a:hover,a:visited,a:active{text-decoration:none;color:#000}
		.cl{ clear:both;}
		.fl{float:left;}
		.fr{float:right;}
		.header{width:100%;height:auto;background-color:#1A8CFF;}
		.header .title{font-size:1rem;text-align:center;width:50%;padding:5% 0; color:white;}
		.header .left{width:25%;padding:3% 0;}
		.header .right{width:15%;padding:5% 5%;font-size:1rem; color:white;text-align:right;}

    html,
    body,
    #container {
        width: 100%;
        height: 100%;
        margin: 0px;
    }

    p.my-desc {
        margin: 5px 0;
        line-height: 150%;
    }
    </style>
</head>
<body>
<div class="header">
	<div class="left fl"></div>
	<div class="title fl">地圖</div>
	<div class="right fr"><div>列表</div></div>
	<div class="cl"></div>
</div>

<!-- 地图 -->
<div id="container"></div>
<!-- 地图 -->

<div id="tip">点击地图上的点标记，打开所添加的自定义信息窗体</div>

<script type="text/javascript" src="__PRIVATE__/js/jquery-1.8.3.min.js"></script>
<!-- 谷歌地图 JS api -->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=dcdbb014f9220889c041073b1e300843&plugin=AMap.PlaceSearch"></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.10"></script>
<!-- 谷歌地图 JS api -->

<script type="text/javascript">
    //店铺列表
 	$('.header .right').click(function(){
 		window.location.href = "{:U(MODULE_NAME.'/'.CONTROLLER_NAME.'/wash_shop_list')}";
	});
</script>

<script type="text/javascript">
/* window.onload = function(){
	openInfo();
} */

//开启地图
var map = new AMap.Map('container', {
    resizeEnable: true,   //监控地图容器尺寸变化
    zoomEnable:true,     //地图是否可缩放
    dragEnable:true,      //鼠标拖拽
    keyboardEnable:false, //键盘移动
    doubleClickZoom:false,
    touchZoom:true,       // 多点触控缩放浏览地图
    zoom:13,
    center: [113.5469627380,22.1859744299],
    icon : 'https://vdata.amap.com/icons/b18/1/2.png',//24px*24px
});
/*
map.clearMap();  // 清除地图覆盖物
var markers = [
    {
	    icon: '__PRIVATE__/images/wash.png',
	    position: [113.5610000000 ,22.1593700000]
	},
	{
	    icon: '__PRIVATE__/images/wash.png',
	    position: [113.5509210000 ,22.2024290000]
	},
	{
	    icon: '__PRIVATE__/images/wash.png',
	    position: [113.5451150000 ,22.2002020000]
	}
];
// 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
markers.forEach(function(marker) {
    new AMap.Marker({
        map: map,
        icon: marker.icon,
        position: [marker.position[0], marker.position[1]],
        offset: new AMap.Pixel(-12, -36)
    });
}); */
/* var center = map.getCenter();
var centerText = '当前中心点坐标：' + center.getLng() + ',' + center.getLat();
document.getElementById('centerCoord').innerHTML = 'success';
document.getElementById('tips').innerHTML = '成功添加三个点标记，其中有两个在当前地图视野外！';

// 添加事件监听, 使地图自适应显示到合适的范围
AMap.event.addDomListener(document.getElementById('setFitView'), 'click', function() {
    var newCenter = map.setFitView();
    document.getElementById('centerCoord').innerHTML = '当前中心点坐标：' + newCenter.getCenter();
    document.getElementById('tips').innerHTML = '通过setFitView，地图自适应显示到合适的范围内,点标记已全部显示在视野中！';
}); */



// 创建一组Marker和一个信息窗体
var lnglats =<?php echo json_encode($lat_lon);?>;
var list =<?php echo json_encode($list);?>;


// var lnglats=[//也可以使用LngLat对象
//  [116.368904,39.923423],[116.382122,39.921176],
//  [116.387271,39.922501],[116.398258,39.914600]
// ];
var sid;
var name;
var address;

var infoWindow = new AMap.InfoWindow();
for(var i = 0, marker; i < lnglats.length; i++){
    marker=new AMap.Marker({
        position:lnglats[i],
        map:map,
    });
    name = list[i]["address_name"];
    address = list[i]["location"];
    url = '/Index/wash_shop_info/id/'+list[i]["id"]+'.html';
    marker.content='<strong>'+name+'</strong><a href="'+url+'"><p class="my-desc"><strong>地址：'+address+'</strong></p></a>';
    //给Marker绑定单击事件
    marker.on('click', markerClick);
}
// 地图自适应显示到合适的范围内,点标记已全部显示在视野中！
map.setFitView();

//处理Marker的单击事件
function markerClick(e){
    infoWindow.setContent(e.target.content);
    infoWindow.open(map, e.target.getPosition());
}

</script>
</body>
</html>
